<template>
    <a-tree-select :tree-data="data" :value="modelValue" allowClear treeDefaultExpandAll @change="handleChange"
        placeholder="请选择" :fieldNames="{ label: 'name', value: 'id' }" rowKey="id" />
</template>

<script setup lang="ts">
import { getMenuList } from '@/api/system/permission/auth'

interface TreeNode {
    id: number
    name: string
    children?: TreeNode[]
}

const props = defineProps<{
    modelValue: string
}>()

const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()

const data = ref<TreeNode[]>([])
onMounted(async () => {
    const array = [{
        id: 0,
        name: '顶级菜单',
        children: []
    }]
    const res = await getMenuList({
        tree: true
    })
    array[0].children = res.lists
    data.value = array
})

const handleChange = (value: string) => {
    emit('update:modelValue', value)
}
</script>
